<template>
	<view class="bg">
		<!-- 		<cu-custom :bgColor="globalData.bgColor" :isBack="true">
			<template #content>
				<text class="text-darkgrey">{{ $t('order.detail.crltbx') }}</text>
			</template>
		</cu-custom> -->
		<div class="bg-header">
			<img @click="goBack"
				src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/b1edf775-7078-4857-bb96-c0c708271e54.png"
				alt="">
			<div class="bh-title">{{ $t('order.detail.crltbx') }}</div>
		</div>
		<view class="detail-content">
			<div class="padding text-bold text-white margin-top-xs pend-header">
				{{data.statusDesc}}
				<img class="send-pend-img" v-if="data.statusDesc === '待发货'"
					src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/3ef332fc-5267-41a7-a675-9af0572fb361.gif"
					alt="">
				<img class="send-pend-img" v-if="data.statusDesc === '待收货'"
					src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/ee91f62d-688a-4db0-81ad-d1d09f92ef63.gif" />
				<img class="send-pend-img" v-if="data.statusDesc === '待付款'"
					src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/525db329-6a52-4279-9535-8212da6e0c41.gif" />
			</div>

			<!-- 收货信息 -->
			<view class="wrap bg-white padding ">
				<view class="text-darkgrey">{{ $t('order.detail.2afxwq') }}</view>
				<view class="margin-top-xs text-sm">
					<!-- 					<view class="text-black">
						<text class="text-black margin-right-xs"></text>
						<text v-if="data.deliveryWay == 1">普通快递</text>
						<text v-else-if="data.deliveryWay == 2">上门自提</text>
						<text v-else-if="data.deliveryWay == 3">线下收银</text>
					</view> -->
					<view v-if="data.deliveryWay == 1" class="margin-top-xs">
						<view class="text-black margin-top-xs detail-user">
							<text class="text-black margin-right-xs"></text>
							{{ data.recName + ' ' }}
							<text class="detail-phone">{{ data.recTel }}</text>
						</view>
						<view class="margin-top-xs text-black">
							<text class="text-black margin-right-xs"></text>
							{{ data.recAddress }}
						</view>
					</view>
					<img class="address-line"
						src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/a7a4ee49-a849-489d-9af6-224dfd617b24.jpg"
						alt="">
				</view>
				<!-- 门店自提 -->
				<view v-if="data.deliveryWay == 2" class="margin-top-xs">
					<shop-store-info :storeId="data.storeId" />
				</view>
			</view>

			<!-- 商品 -->
			<view class="wrap bg-white padding margin-top-xs">
				<view class="cu-list menu-avatar flex justify-between align-center" v-for="item in data.listOrderItem"
					:key="item.id">
					<view class="cu-avatar img-box bg-white"
						:style="{ 'background-image': item.picUrl ? 'url(' + item.picUrl + ')' : '' }"></view>
					<view class="content flex-sub padding-left-sm">
						<view class="text-darkgrey text-lg text-bold text-to-long">
							<text v-if="data.orderType != '0'"
								class="cu-tag text-xs radius light bg-red margin-right-xs">
								{{
									data.orderType == '1'
										? $t('order.detail.73mq07')
										: data.orderType == '2'
										? $t('order.detail.6kcy5i')
										: data.orderType == '3'
										? $t('order.detail.4m2y04')
										: ''
								}}
							</text>
							{{ item.spuName }}
						</view>
						<view class="text-darkgrey text-df flex justify-between margin-top-xs text-sm">
							<text>{{ $t('goodsappraises.list.5n08pj') }}{{ item.specInfo ? item.specInfo : $t('order.detail.44038b') }}</text>
							<text>×{{ item.quantity }}</text>
						</view>
						<view class="margin-top-xs justify-between">
							<view class="text-darkgrey text-sm">
								{{ $t('order.detail.48n038') }}
								<text class="text-red text-xl text-bold text-price">
									{{ item.paymentPrice }}
									<text
										v-if="item.paymentCouponPrice">{{ ' +' + $t('order.detail.8mlu0h') + item.paymentCouponPrice }}</text>
									{{ item.paymentPoints ? $t('order.detail.fhg1r7') + item.paymentPoints : '' }}
								</text>
								<!-- 								<text class="text-blue margin-left-xs text-darkgrey text-sm"
									@click="showEditPriceDialog(item)"
									v-if="item.status == '0' && data.isPay == '0' && !data.status">
									{{ $t('order.detail.7b7y07') }}
									<text class="cuIcon-write"></text>
								</text> -->
							</view>
							<view class="flex justify-between">
								<view class="cu-tab line-orange text-sm margin-top-xs">{{ item.statusDesc }}</view>
								<navigator :url="'../orderrefunds/detail?orderItemId=' + item.id"
									v-if="item.status == '1' || item.status == '2'" class="text-blue margin-top-xs">
									{{ $t('order.detail.dhy7ih') }}
									<text class="cuIcon-write"></text>
								</navigator>
							</view>
							<view class="margin-top-xs">
								<view v-if="item.deliveryType == 1" class="flex justify-between align-center">
									<view>发物流:</view>
									<view v-if="item.orderLogistics" class="flex justify-between align-center"
										@click="showOrderLogisticsDetail(item)">
										<view>({{ item.orderLogistics.logisticsName }})</view>
										<view class="flex align-center">
											{{ item.orderLogistics.statusDesc }}
											<text class="cuIcon-right"></text>
										</view>
									</view>
									<view v-else>暂无物流信息</view>
								</view>
								<text v-else-if="item.deliveryType == 2">商家配送</text>
								<text v-else-if="item.deliveryType == 3" class="text-blue">虚拟发货</text>
							</view>

							<view v-if="item.status == '0' && data.isPay == '0' && !data.status"
								class="margin-top-xs flex justify-between" @tap="showEditPriceDialog(item)">
								<view></view>
								<view class="cu-btn round button-bg bg-red shadow-blur ">
									订单改价
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="wrap bg-white solid-top">
				<view class="cu-item shadow padding">
					<view class="flex justify-between">
						<view></view>
						<view>
							<view class="text-xs cu-tag light round pay"
								:class="data.isPay == 1 ? 'bg-cyan' : 'bg-orange'">
								{{ data.isPay == 1 ? $t('order.detail.4y6774') : $t('order.detail.uxo96u') }}
							</view>
							<view class="text-xs cu-tag light round pay"
								:class="data.status == 2 || data.status == 3 || data.status == 4 ? 'bg-blue' : data.status == 5 ? 'bg-grey' : 'bg-orange'">
								{{ data.statusDesc }}
							</view>
							<view class="text-xs cu-tag light round pay" v-if="data.appraisesStatus"
								:class="data.appraisesStatus != 0 ? 'bg-blue' : 'bg-orange'">
								{{
									data.appraisesStatus == '0'
										? $t('order.detail.k6x6s1')
										: data.appraisesStatus == '1'
										? $t('order.detail.l2kk8z')
										: data.appraisesStatus == '2'
										? $t('order.detail.4ex3n0')
										: ''
								}}
							</view>
						</view>
					</view>
					<view class="flex justify-between">

						<view style="width: 100%;">
							<view class="flex text-sm text-purple-grey cell-item padding-top-xs">
								{{ $t('goodsappraises.list.k1h88u') }}
								<text>{{ data.orderNo }}</text>
							</view>
							<view class="flex text-sm text-purple-grey cell-item">
								{{ $t('order.detail.8l5h7y') }}
								<text>{{ data.createTime }}</text>
							</view>
							<view v-if="data.orderTypeDesc" class="text-sm text-purple-grey padding-top-xs cell-item">
								订单类型
								<text>{{ data.orderTypeDesc }}</text>
							</view>
							<view v-if="data.paymentTime" class="text-sm text-purple-grey padding-top-xs cell-item">
								{{ $t('order.detail.02eay3') }}
								<text>{{ data.paymentTime }}</text>
							</view>
							<view v-if="data.deliveryWay" class="text-sm text-purple-grey padding-top-xs cell-item">
								配送方式
								<text>
									{{ data.deliveryWay == 1 ? '普通快递' : data.deliveryWay == 2 ? '上门自提' : data.deliveryWay == 3 ? '线下收银' : '未知' }}
								</text>
							</view>
							<view v-if="data.isPay" class="text-sm text-purple-grey padding-top-xs cell-item">
								支付状态
								<text>{{ data.isPay === '1' ? '已支付' : '待付款' }}</text>
							</view>
							<view v-if="data.paymentType" class="text-sm text-purple-grey padding-top-xs cell-item">
								支付类型
								<text>
									{{
									    data.paymentType == 1
									      ? '微信支付'
									      : data.paymentType == 2
									      ? '支付宝'
									      : data.paymentType == 3
									      ? '余额支付'
									      : data.paymentType == 4
									      ? '微信跨境支付'
									      : '未知'
									  }}
								</text>
							</view>
							<view v-if="data.deliveryTime" class="text-sm text-purple-grey padding-top-xs cell-item">
								{{ $t('order.detail.2y41kf') }}
								<text>{{ data.deliveryTime }}</text>
							</view>
							<view v-if="data.receiverTime" class="text-sm text-purple-grey padding-top-xs cell-item">
								{{ $t('order.detail.475fg0') }}
								<text>{{ data.receiverTime }}</text>
							</view>
							<view v-if="data.closingTime" class="text-sm text-purple-grey padding-top-xs cell-item">
								{{ $t('order.detail.80aw1t') }}
								<text>{{ data.closingTime }}</text>
							</view>
						</view>
					</view>
					<view v-if="data.transactionId" class="text-sm text-purple-grey padding-top-xs cell-item">
						{{ $t('order.detail.62tcpf') }}
						<text>{{ data.transactionId }}</text>
					</view>
				</view>
			</view>

			<!-- 价格 -->
			<view class="wrap bg-white padding margin-top-xs padding-bottom-xs">
				<view class="text-sm text-purple-grey margin-top-sm cell-item">
					{{ $t('order.detail.v48354') }}
					<text class="text-red cell-value">
						<text class="text-price margin-right-xs">{{ data.salesPrice }}</text>
					</text>
				</view>
				<view class="text-sm text-purple-grey cell-item">
					{{ $t('order.detail.ekr37y') }}
					<text class="text-red">
						{{ '+ ' }}
						<text class="text-price margin-right-xs">{{ data.freightPrice }}</text>
					</text>
				</view>
				<view class="text-sm text-purple-grey cell-item">
					{{ $t('order.detail.n58pvv') }}
					<text class="text-red">
						{{ '- ' }}
						<text class="text-price margin-right-xs">{{ data.paymentCouponPrice }}</text>
					</text>
				</view>
				<view class="text-sm text-purple-grey cell-item">
					{{ $t('order.detail.86m335') }}
					<text class="text-red">
						{{ '- ' }}
						<text class="text-price margin-right-xs">{{ data.paymentPointsPrice }}</text>
					</text>
				</view>
				<view class="text-sm text-purple-grey cell-item">
					{{ $t('order.detail.lx56za') }}
					<text class="text-red">
						{{ '- ' }}
						<text class="text-price margin-right-xs">{{ data.paymentUserGradeDiscountPrice || 0 }}</text>
					</text>
				</view>
				<view class="text-sm text-purple-grey cell-item">
					{{ $t('order.detail.m6d4d4') }}
					<text class="text-red">
						{{ '- ' }}
						<text class="text-price margin-right-xs">{{ data.paymentVipDiscountPrice || 0 }}</text>
					</text>
				</view>
				<view class="text-sm text-purple-grey cell-item">
					{{ $t('order.detail.4l88h7') }}
					<text class="text-price text-red margin-right-xs">{{ data.paymentPoints }}</text>
				</view>
				<view class="text-sm text-purple-grey cell-item">
					{{ $t('order.detail.287ftg') }}
					<text class="text-price text-red margin-right-xs">{{ data.paymentPrice }}</text>
				</view>
				<view class="text-df text-purple-grey margin-bottom-xs cell-item" v-if="data.userMessage">
					<text class="text-sm">{{ $t('order.detail.8513m2') }}</text>
					<text class="text-sm">{{ data.userMessage }}</text>
				</view>
				<view class="text-df text-purple-grey margin-bottom-xs cell-item"
					v-if="data.orderLogistics && data.orderLogistics.message">
					<text class="text-sm">{{ $t('order.detail.ers335') }}</text>
					<text class="text-sm">{{ data.orderLogistics.message }}</text>
				</view>
				<view class="margin-top-sm text-darkgrey cell-item cell-item-total">
					订单总金额
					<div>
						实付金额:
						<text class="text-price text-red text-bold margin-right-xs">{{ data.paymentPrice }}</text>
					</div>
				</view>
				<!-- 				<view class="margin-top-sm text-darkgrey cell-item">
					{{ $t('order.detail.xk655j') }}
					<text v-if="data.paymentType == '1'"
						class="margin-right-xs text-green">{{ $t('order.detail.45czl6') }}</text>
					<text v-else-if="data.paymentType == '2'"
						class="margin-right-xs text-green">{{ $t('order.detail.295om4') }}</text>
					<text v-else-if="data.paymentType == '3'"
						class="margin-right-xs text-green">{{ $t('order.detail.de749s') }}</text>
					<text
						class="text-purple-grey text-sm">({{ data.paymentWay == '2' ? $t('order.detail.l67ve2') : '' }})</text>
				</view> -->
				<view v-if="globalData.permissions['mall:orderinfo:edit']"
					class="text-sm padding-top-sm flex justify-end padding-bottom-xs">
					<view v-if="data.isPay == '0' && !data.status"
						class="cu-btn round button-bg bg-blue shadow-blur margin-right-sm" @tap="onOrderCancel(data)">
						{{ $t('login.login.5csq28') }}
					</view>
					<view v-if="data.status == 1 && data.deliveryWay == 2"
						class="cu-btn round button-bg bg-blue shadow-blur margin-right-sm" @tap="onTakeGoods(data)">
						{{ $t('order.detail.bxsq86') }}
					</view>
					<navigator :url="'logisticsForm?id=' + data.id" v-else-if="data.status == 1"
						class="cu-btn round button-bg bg-blue shadow-blur margin-right-sm">
						{{ $t('order.detail.o7cmyd') }}
					</navigator>
				</view>
			</view>


			<!-- 用户 -->
			<view class="wrap bg-white padding margin-top-xs" v-if="data.userInfo">
				<view class="text-darkgrey">{{ $t('order.detail.897y65') }}</view>
				<view class="margin-top-xs flex justify-between padding-top-xs padding-bottom-xs text-sm">
					<text class="text-black">{{ $t('order.detail.50g97g') }}</text>
					<text class="text-black">{{ data.userInfo.nickName }}</text>
				</view>
				<view class="flex justify-between padding-top-xs padding-bottom-xs text-sm">
					<text class="text-black">{{ $t('order.detail.50fulm') }}</text>
					<text class="text-black">{{ data.userInfo.userCode }}</text>
				</view>
				<view class="flex justify-between padding-top-xs padding-bottom-xs text-sm">
					<text class="text-black">{{ $t('order.detail.8sy7f1') }}</text>
					<text class="text-black">{{ data.userInfo.pointsCurrent }}</text>
				</view>
				<view class="flex justify-between padding-top-xs padding-bottom-xs text-sm">
					<text class="text-black">{{ $t('order.detail.7311oo') }}</text>
					<text
						class="text-black">{{ data.userInfo.sex == 2 ? $t('order.detail.32163w') : $t('order.detail.82srkk') }}</text>
				</view>
			</view>
			<!-- 发货类型 -->
			<view class="wrap bg-white padding margin-top-xs flex justify-between" v-if="data.deliveryType">
				<view class="text-darkgrey">{{ $t('order.detail.32p2w9') }}</view>
				<view class="text-darkgrey">
					<view class="text-purple-grey margin-left">
						<text v-if="data.deliveryType == '1'">{{ $t('order.detail.88055j') }}</text>
						<text v-else-if="data.deliveryType == '2'">{{ $t('order.detail.6u9g5d') }}</text>
						<text v-else-if="data.deliveryType == '3'">{{ $t('order.detail.4m81t0') }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 改价弹框 -->
		<view class="cu-modal" :class="showModal ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{ $t('order.detail.x27ebr') }}</view>
					<view class="action" @tap="showModal = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding">
					<input :placeholder="$t('order.detail.ajn4t3')" type="number" name="paymentPrice"
						v-model="editPriceForm.paymentPrice" @input="inputChange" />
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green"
							@tap="showModal = false">{{ $t('login.login.5csq28') }}</button>
						<button class="cu-btn bg-green margin-left"
							@tap="handleEditPrice">{{ $t('goodsappraises.list.6to1i8') }}</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 物流信息 -->
		<view class="cu-modal" :class="showLogisticsModal ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{ $t('order.detail.2afxwq') }}</view>
					<view class="action" @tap="showLogisticsModal = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view style="max-height: 70vh; overflow: auto">
					<view>
						<view v-if="itemOrderLogistics"
							class="text-sm text-left flex justify-between align-center padding-xs">
							<view class="text-black padding-lr-xs">收货信息</view>
							<view class="flex-sub padding-left">
								<view class="text-purple-grey margin-top-xs">
									<text class="text-purple-grey cuIcon-people margin-right-xs"></text>
									{{ itemOrderLogistics.recName + ' ' }}{{ itemOrderLogistics.recTel }}
								</view>
								<view class="margin-top-xs text-purple-grey">
									<text class="text-purple-grey cuIcon-location margin-right-xs"></text>
									{{ itemOrderLogistics.recAddress }}
								</view>
							</view>
						</view>
						<view v-if="itemOrderLogistics"
							class="text-sm text-left flex justify-between align-center padding-xs">
							<view class="text-black padding-lr-xs">发货信息</view>
							<view class="flex-sub padding-left">
								<view class="text-purple-grey margin-top-xs">
									<text class="text-purple-grey cuIcon-people margin-right-xs"></text>
									{{ itemOrderLogistics.logisticsCode + ' ' }}{{ itemOrderLogistics.logisticsName }}
								</view>
								<view class="margin-top-xs text-purple-grey">
									<text class="text-purple-grey cuIcon-location margin-right-xs"></text>
									{{ itemOrderLogistics.logisticsNo }}
								</view>
							</view>
						</view>
					</view>
					<view v-if="!listOrderLogisticsDetail || listOrderLogisticsDetail.length == 0"
						class="padding text-gray solid-top">暂无物流信息</view>
					<view class="cu-timeline text-sm Logistics-information"
						v-for="(item, index) in listOrderLogisticsDetail" :key="index">
						<view :class="'cu-item ' + (index == 0 ? 'text-red cuIcon-roundcheckfill text-xl' : '')">
							<view class="text-left" :class="' bg-white text-sm' + (index == 0 ? 'bg-red' : '')">
								<view class="logisticsTime">
									<view class="text-grey text-sm">{{ item.logisticsTime }}</view>
								</view>
								<view class="logisticsAddress">{{ item.logisticsInformation }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 用来保证底部高度 -->
		<view class="cu-tabbar-height margin-bottom"></view>
	</view>
</template>

<script>
	import {
		getPage,
		getObj,
		addObj,
		putObj,
		delObj,
		editPrice,
		orderCancel,
		takeGoods
	} from '@/api/mall/orderinfo';
	import {
		getPage as getPageOrderItem
	} from '@/api/mall/orderitem';
	import {
		getPage as getPageOrderlogistics,
		getObj as getObjOrderlogistics
	} from '@/api/mall/orderlogistics';

	import shopStoreInfo from '@/components/shop-store-info/index.vue';

	export default {
		components: {
			shopStoreInfo
		},
		onLoad(e) {
			if (e) {
				this.id = e.id;
			}
		},
		onShow(e) {
			if (this.id) {
				this.getData();
			}
		},
		data() {
			return {
				globalData: getApp().globalData,
				CustomBar: this.CustomBar,
				id: null,
				orderNo: null,
				data: {},
				listOrderItem: [],
				showModal: false,
				editPriceForm: {
					id: null,
					paymentPrice: 0
				},
				showLogisticsModal: false,
				itemOrderLogistics: {},
				listOrderLogisticsDetail: [] //物流信息
			};
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			showEditPriceDialog(item) {
				this.editPriceForm.id = item.id;
				this.editPriceForm.paymentPrice = item.paymentPrice;
				this.showModal = true;
			},
			//改价
			handleEditPrice() {
				if (!this.editPriceForm.paymentPrice) {
					uni.showToast({
						title: this.$t('order.detail.43u8c1'),
						icon: 'none'
					});
					return;
				}
				editPrice({
						id: this.editPriceForm.id,
						paymentPrice: this.editPriceForm.paymentPrice
					})
					.then((data) => {
						uni.showToast({
							title: this.$t('order.detail.m6f5u2')
						});
						this.getData();
						this.showModal = false;
					})
					.catch(() => {});
			},
			//订单取消
			onOrderCancel(row, index) {
				var _this = this;
				uni.showModal({
					title: this.$t('bargain.bargaininfo.b8740a'),
					content: this.$t('order.detail.53vu17'),
					success: (res) => {
						if (res.confirm) {
							orderCancel(data.id)
								.then((data) => {
									uni.showToast({
										title: this.$t('order.detail.jx810q')
									});
									_this.getData();
								})
								.catch(function(err) {});
						} else if (res.cancel) {}
					}
				});
			},
			//提货
			onTakeGoods(data) {
				var _this = this;
				uni.showModal({
					title: this.$t('bargain.bargaininfo.b8740a'),
					content: this.$t('order.detail.ux6f1y'),
					success: (res) => {
						if (res.confirm) {
							takeGoods(data.id)
								.then((data) => {
									uni.showToast({
										title: this.$t('order.detail.h41m2m')
									});
									_this.getData();
								})
								.catch(function(err) {});
						} else if (res.cancel) {}
					}
				});
			},
			getData() {
				getObj(this.id).then((response) => {
					if (response.data) {
						this.data = response.data;
						this.orderNo = this.data.orderNo;
						this.getPageOrderItem();
					}
				});
			},
			getPageOrderItem() {
				let querySearch = '?orderNo=' + this.orderNo;
				getPage(querySearch).then((response) => {
					if (response.data) {
						this.data.listOrderItem = response.data.records.length > 0 ? response.data.records[0]
							.listOrderItem : [];
						this.getlogisticsList();
					}
				});
			},
			inputChange($event) {
				this.editPriceForm.paymentPrice = $event.target.value;
			},
			//加载物流列表信息
			getlogisticsList() {
				getPageOrderlogistics({
					orderId: this.id
				}).then((response) => {
					let listOrderLogistics = response.data.records || [];
					if (listOrderLogistics && listOrderLogistics.length > 0) {
						this.data.listOrderItem.map((item) => {
							// 2.取出物流的订单的商品信息
							let orderLogistics = listOrderLogistics.filter((item2) => {
								return item.logisticsId == item2.id;
							});
							if (orderLogistics && orderLogistics.length > 0) {
								item.orderLogistics = orderLogistics[0];
							}
						});
					}
				});
			},
			//加载物流信息
			showOrderLogisticsDetail(row) {
				this.itemOrderLogistics = row.orderLogistics;
				getObjOrderlogistics(row.orderLogistics.id).then((response) => {
					this.showLogisticsModal = true;
					this.listOrderLogisticsDetail = response.data.listOrderLogisticsDetail || [];
				});
			}
		}
	};
</script>

<style>
	.img-box {
		width: 200rpx !important;
		height: 200rpx !important;
	}

	.pay {
		padding: 10rpx 20rpx 10rpx 20rpx;
	}

	.button-bg {
		padding: 20rpx 40rpx 20rpx 40rpx;
	}
</style>

<style scoped lang="scss">
	.bg {
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	.bg-header {
		background-color: #4FBF90;
		width: 100%;
		border-bottom-left-radius: 80rpx;
		border-bottom-right-radius: 80rpx;
		height: 500rpx;
		position: relative;

		.bh-title {
			font-size: 30rpx;
			color: #fff;
			text-align: center;
			margin-top: 110rpx;
		}

		image {
			position: absolute;
			top: 100rpx;
			left: 10rpx;
			width: 60rpx;
			height: 60rpx;
		}
	}

	.detail-content {
		margin-top: -300rpx;
		z-index: 2;

		.pend-header {
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;
			font-size: 40rpx;

			.send-pend-img {
				position: absolute;
				right: 0;
				width: 100rpx;
				height: 100rpx;
			}
		}
	}

	.address-line {
		width: 100%;
		height: 3rpx;
	}

	.wrap {
		width: 710rpx;
		margin: 20rpx;
		border-radius: 24rpx;
	}

	.cell-item {
		position: relative;
		display: flex;
		justify-content: space-between;
		color: #333;
		margin-top: 10rpx;
	}

	.cell-item-total {
		margin-top: 30rpx;
		font-size: 36rpx;
	}

	.detail-user {
		font-size: 30rpx;

		.detail-phone {
			font-size: 26rpx;
			color: #333;
		}
	}
</style>